<template>
  <el-dialog
    v-dialogDrag="showModal"
    title="搜索"
    :close-on-click-modal="false"
    width="30%"
    :visible.sync="showModal">
    <el-form
      ref="queryForm"
      v-bind="config"
      class="more-query"
      :model="form">
      <el-row
        :gutter="20"
        class="more-row">
        <el-col
          v-for="(item,index) in options"
          v-show="!item.hide"
          :key="index"
          ref="Col"
          :span="item.span?item.span:24">
          <el-form-item
            v-if="!item.hide"
            :label="item.label">
            <template
              v-if="item.type=='slot'">
              <slot
                :name="item.soltName"
                :form="form"
                :item="item" />
            </template>
            <template v-else>
              <form-element
                :item="item"
                :fields="form">
              </form-element>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <div class="more-btn-group">
            <div class="right-btn">
              <el-button @click="showModal=false">
                取消
              </el-button>
              <el-button @click="onReset">
                重置
              </el-button>
              <el-button
                type="primary"
                @click="onSearch">
                确认
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
  import formElement from '@/components/QueryForm/element'
  export default {
    components: {
      formElement
    },
    props: {
      config: {
        type: Object,
        default: () => ({
          'label-suffix': ':',
          'label-width': 'auto'
        })
      },
      options: {
        type: Array,
        default: () => ({})
      }
    },
    data() {
      return {
        showModal: false,
        form: {}
      }
    },
    mounted() {
      this.options.forEach(item => {
        this.$set(this.form, item.key, item.defaultVal)
      })
    },
    methods: {
      show() {
        this.showModal = true
      },
      onReset(tag) {
        this.$refs.queryForm && this.$refs.queryForm.resetFields()
        for (const i in this.form) {
          if (this.form.hasOwnProperty(i)) {
            this.form[i] = null
          }
        }
        if (tag === false) {
          this.onSearch()
        }
      },
      onSearch() {
        this.$emit('query', this.form)
        this.showModal = false
      }
    }
  }
</script>
<style lang='scss' scoped>
.more-btn-group{
  text-align: right;
}
</style>
